<template>
  <basic-container>
    <avue-crud ref="crud"
               :option="tableOption"
               v-model="form"
               :data="list"
               @row-save="handleSave">
      <template slot="specCategoryForm">
        <avue-cascader v-model="form.specCategory"
                       :dic="categoryList"
                       @change="categoryChange"
                       :props="{label:'name',value:'id'}"></avue-cascader>
      </template>
      <template slot="genericForm">
        <spec-params :params="specParamsList"
                     type="generic"
                     @emitSpecParams="emitSpecParams" />
      </template>
      <template slot="specialForm">
        <spec-params :params="specParamsList"
                     type="special"
                     @emitSpecParams="emitSpecParams" />
      </template>
      <template slot="specsForm">
        <el-table border
                  stripe
                  highlight-current-row
                  :data="JSON.parse(form['sku'])">
          <el-table-column :label="item.name"
                           :key="i"
                           :prop="item.id + ''"
                           v-for="(item, i) in JSON.parse(form['special'])">
          </el-table-column>
        </el-table>
      </template>
      <template slot="menuLeft">
        <el-button class="filter-item"
                   type="primary"
                   icon="el-icon-plus"
                   @click="$refs.crud.rowAdd()">添加
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
import { tableOption } from '@/const/crud/goods/spu'
import { fetchTree } from '@/api/admin/sys-tree'
import { groupSpecList } from '@/api/goods/spec'
import specParams from '@/components/goods/spec-params.vue'

export default {
  name: 'goodsSpu',
  data () {
    return {
      tableOption,
      categoryList: [],
      form: {
        sku: "[]",
        special: "[]"
      },
      list: [],
      checkCategory: undefined,
      specParamsList: [],
    }
  },
  components: { specParams },
  created () {
    this.getCategoryList()
  },
  methods: {
    emitSpecParams (param) {
      if (param['type'] == 'generic') {
        this.$set(this.form, 'generic', param['generic'])
      }
      if (param['type'] == 'special') {
        this.$set(this.form, 'special', param['special'])
        this.$set(this.form, 'sku', param['sku'])
      }
    },
    getCategoryList () {
      fetchTree({ treeType: 3, develop: 1, hierarchy: 3 }).then((resp) => {
        this.categoryList = resp.data.data || []
      })
    },
    categoryChange (val) {
      // 事件被多次触发
      if (val == this.checkCategory) return
      this.checkCategory = val
      if (!this.checkCategory) return
      let categoryId = this.checkCategory.split(",")[2]
      if (!categoryId) return
      // 加载规格模板信息
      groupSpecList(categoryId).then((resp) => {
        this.specParamsList = resp.data.data
      })
    },
    handleSave: function (row, done) {
      console.log(row)
    },
  }
}
</script>